<!-- 表格组件 -->
<template>
  <el-table :data="props.tableData" style="width: 100%" @selection-change="handleSelectionChange" @row-click="getData"
    v-loading="loading" ref="tableComp">
    <!-- 第一列选中框 -->
    <el-table-column v-if="props.multiple" type="selection" width="55" />
    <el-table-column v-if="props.needNum" label="序號" type="index" width="100">
      <template #default="scope">
        <div>
          {{ (pageNum - 1) * 10 + scope.$index + 1 }}
        </div>
      </template>
    </el-table-column>
    <el-table-column v-for="(item, index) in props.tableColumns" :key="index" :prop="item.prop" :label="item.label"
      :width="item.width" :type="item.type">
      <template #default="scope">
        <div v-if="item.prop === 'entranceIml'">
          <img class="table_icon" :src="scope.row.entranceIml" alt="" />
        </div>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="200">
      <template #default="scope">
        <div v-if="isOperate">
          <el-button size="small" @click="$emit('checkClick', scope.row)">
            {{ operate }}
          </el-button>
          <el-button size="small" @click="$emit('checkClick', scope.row)">
            {{ operate }}
          </el-button>
          <el-button size="small" @click="$emit('checkClick', scope.row)">
            {{ operate }}
          </el-button>
          <el-button size="small" link @click="$emit('checkClick', scope.row)">
            {{ operate }}
          </el-button>
          <!-- <el-button
            link
            type="primary"
            size="small"
            @click="$emit('editClick', scope.row)"
            v-if="scope.row.entranceType !== null"
          >
            {{operate2}}
          </el-button> -->
        </div>
        <slot name="operate" v-if="!isOperate" :message="scope.row" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
// import { emit } from 'process'
const props = defineProps({
  tableColumns: Object,
  tableData: Array,
  multiple: {
    type: Boolean,
    default: false,
  },
  isOperate: Boolean,
  loading: Boolean,
  needNum: Boolean,
  edit: {
    type: Boolean,
    default: true,
  },
  pageNum: {
    type: Number,
    default: 1,
  },
  operate: {
    type: String,
    default: '修改',
  },
  operate2: {
    type: String,
    default: ''
  }
})
// const handleClick = () => {
//   console.log('click')
// }
const emit = defineEmits(['handleSelectionChange', 'getData', 'checkClick', 'editClick'])
const handleSelectionChange = (val: []) => {
  emit('handleSelectionChange', val)
}
//  单行点击事件
const getData = (val: []) => {
  emit('getData', val)
}
</script>
<style lang="scss" scoped>
:deep(.el-table__inner-wrapper) {
  width: 100%;

  .el-table__header {
    .el-table__cell {
      background-color: #f7f7f7;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #242424;
      text-align: center;
    }
  }

  .el-table__body {
    .el-table__cell {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #737b8b;
      text-align: center;
    }

    .el-button {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #216fed;
      margin: 0 10px;
    }

    .table_icon {
      width: 30px;
      height: 30px;
    }
  }
}
</style>
